<template>
	<router-view></router-view>
	<div class="Search_box">
		<Search @click.native="OpenSearch" readonly="readonly"></Search>
	</div>
	<Scroll style="margin-top: 7vh;" @Load='Load' :Pull='false'  :Loading='!LoadingEnd'>
		<Waterfall 
		:List='List'
		@distribute='distribute' 
		/>
	</Scroll>
	<Cover 
		title="商品详情"
		:isShow='CoverShow'
		@hiden='CoverShow=false'
	>
		<Details
			:imgs='Cover_Data.images'
			:title="Cover_Data.title"
			:price="Cover_Data.price"
			:genre="Cover_Data.genre"
			:evaluates="Cover_Data.evaluates"
			:sales_volume="Cover_Data.sales_volume"
			:businessID="Cover_Data.businessID"
			:index="Cover_Data.index"
			:StoreName="Cover_Data.StoreName"
			:StoreHead="Cover_Data.StoreHead"
		/>
	</Cover>
</template>

<script lang="ts">
	import {
		defineComponent,
		ref,
		reactive,
		computed,
		inject,
		onMounted
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	import Scroll from '@components/common/scroll/index.vue'
	import Waterfall from '@components/context/waterfall/index.vue';
	import Cover from '@components/context/cover/index.vue';
	import Details from '@components/context/details/index.vue'
	//搜索
	import Search from '@components/common/Search/index.vue'
	import {
		getList,
		ProductDetails
	} from '@assets/request/business';
	export default defineComponent({
		components: {
			Scroll,
			Waterfall,
			Cover,
			Details,
			Search
		},
		methods: {
			Pull(playPull: any) {
				setTimeout(() => {
					playPull()
				}, 3000)
			},
			async distribute(list: any) {
				this.loading.cover('加载中...')
				//此处用户打开商品详情页
				const {businessID,index}=list
				var List:any=await ProductDetails(businessID,index)
				this.loading.close()
				this.CoverShow=true
				this.Cover_Data={
					businessID,
					index,
					...List
				};
			},
			//打开搜索页
			OpenSearch(text:string){
				this.$router.push({
					path:'/Search'
				})
			}
		},
		setup() {
			var loading:any=inject('loading')
			var store = useStore()
			var LoadingEnd=ref(false)
			var isLoading=true;
			//cover  详情页
			var CoverShow=ref(false),
					Cover_Data:any=ref({});
			var List = computed < any > (() => {
				return Array.from(store.getters.getList)
			})
			onMounted(()=>{
				loading.close()
			});
			const Load =async function() {
				console.log('load')
				if(!isLoading)return;
				isLoading=false;
				var token: string = store.getters.getToken;
				var netWorkList: any = await getList(token, store.getters.getListLen)
				netWorkList=Array.from(netWorkList.data)
				if(netWorkList.length==0){
					LoadingEnd.value=true;
					return;
				}
				isLoading=true;
				store.commit('setList', netWorkList)
			}
			return {
				List,
				Load,
				LoadingEnd,
				loading,
				CoverShow,
				Cover_Data
			}
		}
	})
</script>

<style>
	.Search_box{
		width: 100%;
		height: 7vh;
		position: fixed;
		top:0;
		left: 0;
		background-color: #f4f4f4;
		z-index: 1;
		display: flex;
	}
</style>
